import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
import { GLOBAL } from '../../../../config/global';
const scale = GLOBAL.SCALE;
export class CheckGroup extends Component {
	constructor(props) {
		super(props);
		let { selectData, listData } = this.props || {};
		this.state = {
			listData
		}
		this.selectData = selectData || [];
	}

	componentWillReceiveProps(props) {
		let { selectData } = props || {};
		this.selectData = selectData || [];
		this.setState({
			ls: true
		})
	}

	// 状态回显
	_isStatus = (dictKey) => {
		let result = false;
		this.selectData && this.selectData.forEach((item) => {
			if (dictKey == item) {
				result = true;
			}
		})
		return result;
	}

	//单选函数
	_checkFn = (onoff, dictKey) => {
		let { checkCallBack, id } = this.props || {};
		if (onoff) {
			this.selectData = this.selectData.filter((item, index) => item != dictKey)
		} else {
			this.selectData.push(dictKey);
		}
		this.setState({ ls: true }, () => {
			//	checkCallBack && checkCallBack({ id, data: this.selectData });
			checkCallBack && checkCallBack({ [id]: this.selectData });
		});
	}



	render() {
		let { listData } = this.props || {};
		const onSelect = require('../../../../imgs/order/select-on.png');
		const offSelect = require('../../../../imgs/order/select-off.png');
		return (
			<View style={styles.checkGroup}>
				{
					listData && listData.map((item, index) => {
						let onOff = this._isStatus(item.dictKey);
						return (<TouchableOpacity key={index} onPress={() => { this._checkFn(onOff, item.dictKey) }} style={styles.checkBox}>
							<Image source={onOff ? offSelect : onSelect} style={styles.checkImg} />
							<Text style={styles.checkText}>{item.dictName}</Text>
						</TouchableOpacity>)
					})
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	checkGroup: {
		flexDirection: 'row',
		marginTop: 20 * scale,
		width: '100%',
		flexWrap: 'wrap'
	},
	checkBox: {
		flexDirection: 'row',
		alignItems: 'center',
		width: 100 * scale,
		marginBottom: 10 * scale
	},
	checkImg: {
		width: 12 * scale,
		height: 12 * scale,
		marginRight: 6 * scale
	},
	checkText: {
		fontSize: 14 * scale,
		color: '#333',
		width: 75 * scale
	},
	checkTextActive: {
		fontWeight: 'bold'
	}
})